<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="6" :md="6" :sm="24">
            <a-form-item label="业主名称">
            <j-popup
                v-model="queryParam.owner_code"
                org-fields="owner_code,owner_name,owner_type,owner_trade,id_card"
                dest-fields="ownerCode,ownerName,ownerType,ownerTrade,idCard"
                field="ownerCode"
                code="v_xy_park_owner"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="6" :sm="24">
            <a-form-item label="账单日期" style="width:100%;">
              <j-date placeholder="开始日期" v-model="queryParam['self_start_date']" style="width:calc(50% - 15px);"></j-date>
              <span class="group-query-strig">~</span>
              <j-date placeholder="结束日期" v-model="queryParam['self_end_date']" style="width:calc(50% - 15px);"></j-date>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="6" :sm="24" >
            <span class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
      <vxe-grid
        id="OwnerBillList"
        keep-source
        ref="vxeTable"
        :height="null"
        v-bind="options"
        :columns="columns"
        :data="dataSource"
        :sort-config="{trigger:'cell',remote:true}"
        :export-config="false"
      >
      <template v-slot:toolbar_tools>
        <vxe-button style="margin-right:12px;" @click="handleExportXls('账单列表')" icon="vxe-icon--download" circle></vxe-button>
      </template>
      <template v-slot:pager>
        <vxe-pager
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          :current-page.sync="ipagination.currentPage"
          :page-size.sync="ipagination.pageSize"
          :total="ipagination.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template>
    </vxe-grid>
  </a-card>
</template>

<script>

import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import JDate from '@/components/jeecg/JDate'
import { getAction } from '@/api/manage'
export default {
  name: 'OwnerBillList',
  mixins: [VxeTableMixin],
  components: {
    JDate
  },
  data() {
    return {
      columns: [
        { type: 'seq', width: 40, fixed: 'left' },
        { title: '业主名称', field: 'owner_name', width: 150, showOverflow: true, fixed: 'left' },
        { title: '业主编码', field: 'owner_code', width: 150, showOverflow: true, fixed: 'left' },
        {
          title: '期初应收',
          children: [
            { field: 'zl_unpaid_amount', title: '租赁费', width: 100 },
            { field: 'wy_unpaid_amount', title: '物业费', width: 100 },
            { field: 'dian_unpaid_amount', title: '电费', width: 100 },
            { field: 'shui_unpaid_amount', title: '水费', width: 100 },
            { field: 'toltal', title: '合计', width: 120, slots: { default: ({ row }) => {
              return (row.zl_unpaid_amount + row.wy_unpaid_amount + row.dian_unpaid_amount + row.shui_unpaid_amount).toFixed(2)
            } }}
          ]
        },
        {
          title: '本期实收',
          children: [
            { field: 'zl_paid_amount', title: '租赁费', width: 100 },
            { field: 'wy_paid_amount', title: '物业费', width: 100 },
            { field: 'dian_paid_amount', title: '电费', width: 100 },
            { field: 'shui_paid_amount', title: '水费', width: 100 },
            { field: 'toltal2', title: '合计', width: 120, slots: { default: ({ row }) => {
              return (row.zl_paid_amount + row.wy_paid_amount + row.dian_paid_amount + row.shui_paid_amount).toFixed(2)
            } }}
          ]
        },
        {
          title: '期末应收',
          children: [
            { field: 'zl_unpaid_amount2', title: '租赁费', width: 100 },
            { field: 'wy_unpaid_amount2', title: '物业费', width: 100 },
            { field: 'dian_unpaid_amount2', title: '电费', width: 100 },
            { field: 'shui_unpaid_amount2', title: '水费', width: 100 },
            { field: 'toltal3', title: '合计', width: 120, slots: { default: ({ row }) => {
              return (row.zl_unpaid_amount2 + row.wy_unpaid_amount2 + row.dian_unpaid_amount2 + row.shui_unpaid_amount2).toFixed(2)
            } }}
          ]
        },
        { title: '回款率', field: 'g', width: 100, showOverflow: true,
          slots: { default: ({ row }) => {
            const paid_amount = row.zl_paid_amount + row.wy_paid_amount + row.dian_paid_amount + row.shui_paid_amount
            const unpaid_amount = row.zl_unpaid_amount + row.wy_unpaid_amount + row.dian_unpaid_amount + row.shui_unpaid_amount
            return (unpaid_amount ? (paid_amount / unpaid_amount) * 100 : 100) + '%'
          } }},
        { title: '备注', field: 'h', width: 100, showOverflow: true }
      ],
      url: {
        list: '/online/cgreport/api/getColumnsAndData/1528304796560777218',
        exportXlsUrl: '/online/cgreport/api/exportXls/1528304796560777218'
      },
      isorter: {
        column: '',
        order: ''
      }
    }
  },
  methods: {
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.currentPage = 1
      }
      var params = this.getQueryParams()// 查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.data.records
          this.ipagination.total = res.result.data.total
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    }
  },
  created() {

  },
  mounted() {

  }
}
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
